<template>
  <div class="rank_header">
      <div class="title">
          <span>热销商品</span>
      </div>
  </div>
  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="6"
            :immediate-check="false"
            finished-text="到底咯..."
            @load="load"
        >
        <div class="rank_box" v-for="(item,key) in list" :key="key">
            <div class="item">
                <div class="top">
                    <div class="img">
                        <img :src="item.thumbs_text" />
                    </div>
                    <div class="content">
                        <div class="title">{{ item.name }}</div>
                        <p class="middle"><span>Good!</span>{{ item.flag_text }}</p>
                        <p class="desc">抓紧购买吧!</p>
                    </div>
                </div>
                <div class="footer">
                    <div class="price">
                        ￥<span>{{item.price}}</span>
                    </div>
                    <van-button type="primary" @click="btn(item.id)">去购买></van-button>
                </div>
                <div class="tip">
                    <img src="/assets/images/hot.png" />
                    <span>热销指数9.9</span>
                </div>
            </div>
        </div>
        </van-list>
  </van-pull-refresh>
    <!-- 返回顶部 -->
    <van-back-top />

  <Tabbar />
</template>

<script setup>
    const {proxy} = getCurrentInstance()

    let list = ref([]) //数据列表
    let page = ref(1)  //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新
    onMounted(()=>{
    //触发刷新效果
        refresh()
    })
     //下拉刷新 控制刷新显示的时间
  const refresh = async () =>
  {
    //可以去掉定时器
    setTimeout(() => {
      //清空查询参数
      page.value = 1
      list.value = []
      finished.value = false
      loading.value = true
      //加载数据方法
      load()
    }, 200)
  }

  //加载数据方法
  const load = async () =>
  {
    //上拉刷新 下拉加在
    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }
    //请求发送完毕后，加载状态也就完毕了
    // loading.value = false
    //封装数据
    var params = {
      page:page.value,
    }
    
    //发送请求
    var res = await proxy.$POST({
      url:'/product/rank',
      params:params
    })
    //请求发送完毕后，加载状态也就完毕了
    loading.value = false//请求完毕后加载一下

    if(!res) return false

    if(res.code == 0)
    {
      //如果没有更多数据了 就说明已经加载到底了....
      finished.value = true
      return false
    }
    page.value++; //页数改变
    // 合并数组
    list.value = list.value.concat(res.data)

  }
  const btn = (proid)=>{
    proxy.$router.push({path:'/product/info',query:{proid:proid}})
  }
</script>

<style scoped>
  @import url('/assets/css/ProductRank.css');
</style>